<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="24">
				<el-card shadow="never">
					<scEcharts height="300px" :option="bt"></scEcharts>
				</el-card>
			</el-col>
			<!--			<el-col :lg="12">-->
			<!--				<el-card shadow="never">-->
			<!--					<scEcharts height="300px" :option="zzt"></scEcharts>-->
			<!--				</el-card>-->
			<!--			</el-col>-->
			<!--			<el-col :lg="12">-->
			<!--				<el-card shadow="never">-->
			<!--					<scEcharts height="300px" :option="zxt"></scEcharts>-->
			<!--				</el-card>-->
			<!--			</el-col>-->
			<!--			<el-col :lg="12">-->
			<!--				<el-card shadow="never">-->
			<!--					<scEcharts height="300px" :option="btwl"></scEcharts>-->
			<!--				</el-card>-->
			<!--			</el-col>-->
			<!--			<el-col :lg="12">-->
			<!--				<el-card shadow="never">-->
			<!--					<scEcharts height="300px" :option="option"></scEcharts>-->
			<!--				</el-card>-->
			<!--			</el-col>-->
			<!--			<el-col :lg="12">-->
			<!--				<el-card shadow="never">-->
			<!--					<scEcharts height="300px" :option="option2"></scEcharts>-->
			<!--				</el-card>-->
			<!--			</el-col>-->
			<!--			<el-col :lg="12">-->
			<!--				<el-card shadow="never">-->
			<!--					<scEcharts height="300px" :option="option3"></scEcharts>-->
			<!--				</el-card>-->
			<!--			</el-col>-->
			<!--			<el-col :lg="12">-->
			<!--				<el-card shadow="never">-->
			<!--					<scEcharts height="300px" :option="option4"></scEcharts>-->
			<!--				</el-card>-->
			<!--			</el-col>-->
			<!--			<el-col :lg="12">-->
			<!--				<el-card shadow="never">-->
			<!--					<scEcharts height="300px" :option="option5"></scEcharts>-->
			<!--				</el-card>-->
			<!--			</el-col>-->
			<!--			<el-col :lg="12">-->
			<!--				<el-card shadow="never">-->
			<!--					<scEcharts height="300px" :option="option6"></scEcharts>-->
			<!--				</el-card>-->
			<!--			</el-col>-->
		</el-row>
	</el-main>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	import {getReportDeptOpenApiNum} from "@/api/model/log";

	/**
	 * 引入组件 @/components/scEcharts
	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
	 * 支持props包括 height，width，option
	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
	 */

	export default {
		name: 'chart',
		components: {
			scEcharts
		},
		data() {
			return {
				piePatternSrc: '',
				bgPatternSrc: '',
				piePatternImg: new Image(),
				bgPatternImg: new Image(),
				btwl: {},
				zxt: {},
				bt: {},
				zzt: {},
				option: {
					title: {
						text: 'Bar Demo',
						subtext: '基础柱状图',
					},
					grid: {
						top: '80px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '15px',
					},
						{
							data: [110, 180, 120, 120, 60, 90, 110],
							type: 'bar',
							barWidth: '15px',
						}]
				},
				option2: {
					title: {
						text: 'Line Demo',
						subtext: '基础折线图',
					},
					grid: {
						top: '80px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'line',
					},
						{
							data: [110, 180, 120, 120, 60, 90, 110],
							type: 'line',
						}]
				},
				option3: {
					title: {
						text: 'Pie Demo',
						subtext: '基础饼图',
					},
					tooltip: {
						trigger: 'item'
					},
					series: [
						{
							name: '访问来源',
							type: 'pie',
							radius: ['40%', '70%'],
							center: ['50%', '60%'],
							label: false,
							data: [
								{value: 1048, name: '搜索引擎'},
								{value: 735, name: '直接访问'},
								{value: 580, name: '邮件营销'},
								{value: 484, name: '联盟广告'},
								{value: 300, name: '视频广告'}
							]
						}
					]
				},
				option4: {
					title: {
						text: 'Radar Demo',
						subtext: '基础雷达(属性)图',
					},
					tooltip: {
						trigger: 'item'
					},
					radar: {
						radius: 100,
						center: ['50%', '55%'],
						indicator: [
							{name: '销售', max: 100},
							{name: '管理', max: 100},
							{name: '信息技术', max: 100},
							{name: '客服', max: 100},
							{name: '研发', max: 100},
							{name: '市场', max: 100}
						]
					},
					series: [{
						name: "SCUI",
						type: 'radar',
						areaStyle: {},
						data: [
							{
								value: [74, 90, 95, 65, 80, 31],
							}
						]
					}]
				},
				option5: {
					title: {
						text: 'Kline Demo',
						subtext: '基础K线图',
					},
					grid: {
						top: '80px'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					xAxis: {
						data: ['2017-10-23', '2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27', '2017-10-28', '2017-10-29', '2017-10-30'],
					},
					yAxis: {
						scale: true,
					},
					series: [{
						type: 'k',
						data: [
							[2213.19, 2199.31, 2191.85, 2224.63],
							[2203.89, 2177.91, 2173.86, 2210.58],
							[2170.78, 2174.12, 2161.14, 2179.65],
							[2179.05, 2205.5, 2179.05, 2222.81],
							[2212.5, 2231.17, 2212.5, 2236.07],
							[2227.86, 2235.57, 2219.44, 2240.26],
							[2242.39, 2246.3, 2235.42, 2255.21],
							[2246.96, 2232.97, 2221.38, 2247.86]
						]
					}]
				},
				option6: {
					title: {
						text: 'Gauge Demo',
						subtext: '基础仪表盘',
					},
					series: [{
						center: ['50%', '60%'],
						type: 'gauge',
						anchor: {
							show: true,
							showAbove: true,
							size: 20,
							itemStyle: {
								borderWidth: 5
							}
						},
						progress: {
							show: true
						},
						data: [{
							value: 70
						}]
					}]
				}
			}
		},
		async mounted() {
			this.piePatternImg.src = this.piePatternSrc;
			this.bgPatternImg.src = this.bgPatternSrc;
			this.btwl = {
				backgroundColor: {
					image: this.bgPatternImg,
					repeat: 'repeat'
				},
				title: {
					text: '近一个月日志类型统计',
					textStyle: {
						color: '#235894',
						fontSize: 16
					}
					// subtext: '近六个月日志类型统计',
				},
				tooltip: {},
				series: [
					{
						name: '类型',
						type: 'pie',
						selectedMode: 'single',
						selectedOffset: 15,
						clockwise: true,
						label: {
							fontSize: 14,
							color: '#235894'
						},
						labelLine: {
							lineStyle: {
								color: '#235894'
							}
						},
						data: [
							{value: 785, name: '登录日志'},
							{value: 735, name: '查看用户列表'},
							{value: 580, name: '查看角色列表'},
							{value: 484, name: '查看部门列表'},
							{value: 300, name: '查看接口列表'},
							{value: 1048, name: '查询授权接口'}
						],
						itemStyle: {
							opacity: 0.7,
							color: {
								image: this.piePatternImg,
								repeat: 'repeat'
							},
							borderWidth: 2,
							borderColor: '#235894'
						}
					}
				]
			}
			this.zxt = {
				title: {
					text: '近三十天登录趋势',
					textStyle: {
						color: '#235894',
						fontSize: 16
					}
					// subtext: '近六个月日志类型统计',
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
						snap: true,
						label: {
							backgroundColor: '#6a7985'
						}
					}
				},
				xAxis: {
					type: 'category',
					data: ['05-25', '05-26', '05-27', '05-28', '05-29', '05-30', '05-31', '06-01']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [820, 932, 701, 934, 1290, 1330, 320, 1300],
						type: 'line',
						smooth: true
					}
				]
			}
			let data = await this.getData();
			this.bt = {
				title: {
					text: '各部门访问接口次数统计',
					textStyle: {
						color: '#235894',
						fontSize: 16
					}
					// subtext: '近六个月日志类型统计',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				legend: {
					type: 'scroll',
					orient: 'vertical',
					right: 10,
					top: 20,
					bottom: 20,
					data: data.legendData
				},
				series: [
					{
						name: '名称',
						type: 'pie',
						radius: '55%',
						center: ['40%', '50%'],
						data: data.seriesData,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			this.zzt = {
				title: {
					text: '近六个月日志趋势统计',
					textStyle: {
						color: '#235894',
						fontSize: 16
					}
					// subtext: '近六个月日志类型统计',
				},
				grid: {
					top: '80px'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
						snap: true,
						label: {
							backgroundColor: '#6a7985'
						}
					}
				},
				xAxis: {
					type: 'category',
					data: ['12月', '1月', '2月', '3月', '4月', '5月']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [200, 150, 80, 70, 110, 130],
					type: 'bar',
					barWidth: '40px',
				}]
			};
		}
		,
		methods: {
			async getData() {
				let data = {}
				await getReportDeptOpenApiNum({}).then(res => {
					const legendData = [];
					let list = res.data
					list.forEach(e => {
						legendData.push(e.name)
					})
					data.legendData = legendData;
					data.seriesData = list;
				})
				return data;
			}
		}
	}
</script>

<style>
</style>
